<template>
	<view class="withdraws">
		<!-- <navCom navName="提现" @previous="previous"></navCom> -->
		<view class="addcar_box my-mgt-10 my-pdlr-15">
			<view class="my-flex-row-b" v-if="newCarArr.length===0" @click="addCard">
				<view class="addcar_box_txt">
					<image src="https://hxc-pay.oss-cn-shenzhen.aliyuncs.com/vlHDEuZMlz_icar_icon.png" mode="" style="width: 40rpx;height: 40rpx;"></image>
					<text class="my-mgl-15">点击添加账户</text>
				</view>
				<view class="">
					<image src="https://hxc-pay.oss-cn-shenzhen.aliyuncs.com/ibPHhtuXIX_rightarrow_icon.png" mode="" style="width: 26rpx;height: 27rpx;"></image>
				</view>
			</view>
			<view class="my-flex-row-b" @click="choseCard" v-else>
				<view class="arrive-card" v-for="(t,i) in newCarArr" :key="i">
					<text>提现至：</text>
					<image :src="t.bankLogo" mode="" style="width: 42rpx;height: 42rpx;"></image>
					<text class="my-mgl-10">{{t.bankName ||''}}</text><text class="na my-mgl-5">{{t.bankCardNumber?'('+ t.bankCardNumber.substring((t.bankCardNumber.length-4),(t.bankCardNumber.lengt))+')':''}}</text>
				</view>
				<view class="">
					<image src="https://hxc-pay.oss-cn-shenzhen.aliyuncs.com/ibPHhtuXIX_rightarrow_icon.png" mode="" style="width: 26rpx;height: 27rpx;"></image>
				</view>
			</view>
		</view>
		<view class="amount_box my-mgt-10 my-pdlr-15">
			<view class="amount_box_num">可提现金额：{{balance.toFixed(2)||0}}元</view>
			<view class="amount_box_inp">
				<view class="money_icon">￥</view>
				<input type="text" v-model="withdraw" class="inp my-pdl-15" placeholder-class="pla" @input="getcommin" placeholder="请输入提现金额" />
				<view class="txt" @click="goAllMoney">全部提现</view>
			</view>
			<view class="poundage_box" v-show="serviceCharge===false&&withdrawalType==null">
				提现手续费：0.00元
			</view>
			<view class="poundage_box" v-show="serviceCharge===true&&withdrawalType=='RATE'">
				提现手续费：<text v-show="service_fee=='0'">0.00元</text><text v-show="service_fee!='0'">{{commission.toFixed(2)}}%</text>
			</view>
			<view class="poundage_box" v-show="serviceCharge===true&&withdrawalType=='AMOUNT'">
				提现手续费：{{service_amount || '0.00'}}元
			</view>
			<view class="poundage_box" v-show="serviceCharge===true&&withdrawalType=='ALL'">
				提现手续费：{{service_all}}% + {{fixedAmount}}
			</view>
		</view>
		<view class="withdraw_btn">
			<button type="default" class="btn" @click="confirmWithDraw">确认提现</button>
		</view>
		<view class="radio-btn my-flex-col-c">
			<view class="my-flex-row-align-c">
				<radio class="tr" color="#F05329" @click="changeRadio" style="transform: scale(0.7);"  :checked="checked"/>
				<text class="my-cl-ye my-mgl-8 my-font-15" @click="goAgreement">我已阅读并同意<text class="my-cl-or">《用户协议》</text></text>
			</view>
		</view>
		<u-popup v-model="ChooseAccount" mode="bottom" border-radius="40">
			<view class="screen_box">
				<view class="screen_box_tlt my-mgtb-15">
					<view class="tlt">选择到账银行卡</view>
					<image src="https://hxc-pay.oss-cn-shenzhen.aliyuncs.com/aYUwDbroiD_open_icon.png" mode="" @click="closeup" style="width: 28rpx;height: 28rpx;"></image>
				</view>
				<view class="list_box my-pdlr-15">
					<view class="screen_box_ul" v-for="(item,index) in cardArr" :key="index" @click="chosecard(item.id)">
						<image :src="item.bankLogo" mode="" class="img_fir my-mgr-10"></image>
						<view class="li_box">{{item.bankName}}({{item.bankCardNumber.substring((item.bankCardNumber.length-4),item.bankCardNumber.lengt)}})</view>
						<image :src="cardids===item.id?'https://hxc-pay.oss-cn-shenzhen.aliyuncs.com/gGkGiWKeSr_check_icon.png':''" mode="" class="img_check"></image>
					</view>
				</view>
				<view class="screenBtn_box my-mgtb-20">
					<button class="screenBtn" @click="okCard">确定</button>
				</view>
			</view>
		</u-popup>
		<u-popup v-model="paypassword" mode="center" border-radius="40">
			<view class="pay_box">
				<view class="pay_box_tlt my-pdl-15">
					<image src="https://hxc-pay.oss-cn-shenzhen.aliyuncs.com/aYUwDbroiD_open_icon.png" mode="" @click="chosepay" style="width: 28rpx;height: 28rpx;"></image>
					<view class="pay_box_tlt_txt">请输入支付密码</view>
				</view>
				<view class="pay_box_num">
					<view class="name">提现</view>
					<view class="num my-mgt-10">
						<text style="font-size: 24rpx;">￥</text><text style="font-size: 40rpx;">{{showMoney}}</text>
					</view>
				</view>
				<view class="my-pdlr-15">
					<view class="bor my-mgt-8"></view>
				</view>
				<template v-if="withdrawalType =='RATE'">
					<view class="pay_box_li">
						<view class="li_name">服务费</view>
						<view class="li_num">￥{{commission}}</view>
					</view>
					<view class="pay_box_li">
						<view class="li_name">费率</view>
						<view class="li_num">{{service_fee}}%</view>
					</view>
				</template>
				<template v-else-if="withdrawalType =='AMOUNT'">
					<view class="pay_box_li">
						<view class="li_name">服务费</view>
						<view class="li_num">￥{{service_amount}}</view>
					</view>
				</template>
				<template v-if="withdrawalType =='ALL'">
					<view class="pay_box_li">
						<view class="li_name">服务费</view>
						<view class="li_num">￥{{commission.toFixed(2)}}</view>
					</view>
					<view class="pay_box_li">
						<view class="li_name">费率</view>
						<view class="li_num">{{service_all}}% + {{fixedAmount}}</view>
					</view>
				</template>
				<view class="my-mgt-8">
					<u-message-input @finish="getValue" :dot-fill="true" active-color="#2c2c2c" inactive-color="#bebebe"  mode="box" :maxlength="6"></u-message-input>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import navCom from "@/components/navCom/navCom.vue";
	import { getwithdrawalApi ,getbankcardApi ,applicationApi } from "@/api/home.js"
	import { createNamespacedHelpers } from "vuex";
	const {mapActions } = createNamespacedHelpers( "my");
	export default {
		components: {
			navCom,
		},
		data() {
			return {
				ChooseAccount:false,//控制是否显示
				paypassword:false,//支付模态框
				balance:0,//余额
				minimum:0,//最低提现金额
				showMoney:0,//展示金额
				fixedAmount:0,//提现展示固定金额
				service_amount: 0, //设置手续费固定金额
				service_fee: 0, //设置手续费百分比
				service_all:0,//设置手续费百分比+固定金额
				singleWithdrawalMaximum:0,//最高提现金额
				withdrawalType:'AMOUNT',//AMOUNT, RATE ALL 表示为提现固定手续费和提现手续费比例以及比例加固定金额
				serviceCharge:true,//手续费开关
				withdrawalSwitch:true,//提现开关
				withdraw:null,//提现金额
				cardArr:[],//银行卡数组
				cardids:0,//选择卡号
				newCarArr:[],//选择后的卡号数组
				commission:0,
				checked:false,
			};
		},
		onLoad() {
			
		},
		created() {
			this.getinfo()
			this.getBankCard()
		},
		methods:{
			// radio切换
			changeRadio(){
				this.checked = !this.checked
			},
			goAgreement(){
				wx.navigateTo({
					url:'/pages/my/agreement'
				})
			},
			...mapActions(["getUserData","getPersonalData"]),
			// 添加银行卡
			addCard(){
				uni.navigateTo({
					url:"/pages/my/addCard"
				})
			},
			// 确认提现
			confirmWithDraw(){
				if(this.withdrawalSwitch){
					if(this.withdraw===''){
						uni.showToast({
							title:"请输入金额",
							icon:"none"
						})
						return
					}
					else if(this.cardArr.length===0){
						uni.showToast({
							title:"请选择要提现的银行卡",
							icon:"none"
						})
						return
					}
					else if(this.withdraw > this.singleWithdrawalMaximum){
						uni.showToast({
							title:"输入金额超过可提现金额",
							icon:"none"
						})
						return 
					}
					else if(this.checked===false){
						uni.showToast({
							title:"请勾选用户协议",
							icon:"none"
						})
						return
					}
					else{
						if(this.balance<=this.withdraw){
							switch (this.withdrawalType){
								case "AMOUNT":
									this.showMoney = this.withdraw - this.service_amount - 0
									break;
								case "RATE":
									this.showMoney = this.withdraw - this.commission - 0
									break;
								case "ALL":
									this.showMoney = this.withdraw - this.commission - 0
									break;
								default:
									break;
							}
						}else{
							this.showMoney = this.withdraw
						}
						this.paypassword = true
					}
				}else{
					uni.showToast({
						title:"暂无法提现!",
						icon:"none"
					})
				}
			},
			chosepay(){
				this.paypassword = false
			},
			// 计算百分比的费用
			getcommin(){
				if(this.withdraw >this.balance){
					uni.showToast({
						title:"提现金额不能大于可提现金额",
						icon:"none"
					})
					this.withdraw = ''
					return 
				}
				if(this.withdraw < 0){
					uni.showToast({
						title:"提现金额不能小于零",
						icon:"none"
					})
					this.withdraw = ''
					return 
				}
				if(this.withdraw===''){
					this.commission = 0
					return
				} 
				if(this.withdrawalType ==='RATE'&&this.serviceCharge){
					this.commission = parseFloat((parseFloat(this.withdraw) *100000 * parseFloat(this.service_fee) / 100/100000).toFixed(2))
				}
				if(this.withdrawalType ==='ALL'&&this.serviceCharge){
					this.commission = parseFloat((parseFloat(this.withdraw)* parseFloat(this.service_all / 100)) +this.fixedAmount - 0)
				}
			},
			// 打开选择银行卡
			choseCard(){
				this.ChooseAccount = true
			},
			// 关闭选择银行卡
			closeup(){
				this.ChooseAccount = false
			},
			// 选择卡号
			chosecard(id){
				this.cardids = id
			},
			// 确定银行卡
			okCard(){
				this.ChooseAccount = false
				this.newCarArr = this.cardArr.filter((item,index)=>item.id===this.cardids)
			},
			// 获取输入密码值
			async getValue(e){
				let _this = this
				let params = {
					amount:this.withdraw,
					memberBankId:this.cardids,
					payPassword:e
				}
				uni.showLoading({
					title: "正在加载中....",
					mask:true,
				})
				const res =await applicationApi(params).catch((e)=>{
					if(e.statusCode===400){
						setTimeout(()=>{
							_this.getNewData()
						},1500)
					}
				})
				if(res.statusCode ===200){
					uni.hideLoading()
					uni.showToast({
						mask:true,
						title:"提现成功！",
						icon:"success",
						success() {
							setTimeout(()=>{
								_this.getNewData()
							},1000)
						}
					})
				}
			},
			getNewData(){
				this.paypassword = false
				this.getinfo()
				this.getPersonalData()
				this.getUserData()
				this.withdraw = null
			},
			// 获取信息数据
			async getinfo(){
				uni.showLoading({
					title: "正在加载中...."
				})
				const res = await getwithdrawalApi({})
				if(res.statusCode === 200){
					uni.hideLoading()
					this.balance = res.data.data.balance
					this.minimum = res.data.data.minimum || 1
					this.singleWithdrawalMaximum = res.data.data.singleWithdrawalMaximum
					this.withdrawalType = res.data.data.withdrawalType
					this.serviceCharge = res.data.data.serviceCharge
					this.withdrawalSwitch = res.data.data.withdrawalSwitch
					let chargeRate = res.data.data.chargeRate || 0
					let chargeAmount = res.data.data.chargeAmount || 0
					if (this.withdrawalType == 'RATE') {
						this.service_fee = chargeRate.toString();
					}
					if (this.withdrawalType == 'AMOUNT') {
						this.service_amount = chargeRate.toString();
					}
					if (this.withdrawalType == 'ALL') {
						this.service_all = chargeRate.toString();
						this.fixedAmount = chargeAmount
					}
				}
			},
			// 全部提现
			goAllMoney(){
				this.withdraw = this.balance
				this.getcommin()
			},
			// 获取银行卡列表
			async getBankCard(){
				uni.showLoading({
					title: "正在加载中...."
				})
				const res = await getbankcardApi({})
				if(res.statusCode === 200){
					uni.hideLoading()
					this.cardArr = res.data.data
					this.newCarArr = res.data.data.filter((item,index)=>{
						if(index===0){
							this.cardids = item.id
							return item
						}
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.withdraws{
		width: 100%;
		background: #FAFAFA;
		.addcar_box{
			width: 100%;
			height: 100rpx;
			background: #FFFFFF;
			.addcar_box_txt{
				display: flex;
				align-items: center;
				font-size: 30rpx;
				font-weight: 400;
				color: #000000;
			}
			.arrive-card{
				display: flex;
				align-items: center;
				font-size: 30rpx;
				font-weight: 400;
				color: #000000;
				.na{
					font-size: 24rpx;
					font-weight: 400;
					color: #999999;
				}
			}
		}
		.amount_box{
			width: 100%;
			height: 260rpx;
			background: #FFFFFF;
			.amount_box_num{
				width: 100%;
				height: 80rpx;
				line-height: 100rpx;
				font-size: 26rpx;
				font-weight: 400;
				color: #000000;
			}
			.amount_box_inp{
				width: 100%;
				height: 120rpx;
				display: flex;
				align-items: center;
				border-bottom: 1rpx solid #E8E8E8;
				.money_icon{
					width: 28rpx;
					height: 35rpx;
					line-height: 20rpx;
					font-size: 48rpx;
					font-weight: bold;
					color: #000000;
				}
				.txt{
					width: 140rpx;
					height: 100%;
					line-height: 120rpx;
					text-align: right;
					font-size: 26rpx;
					font-weight: 400;
					color: #F05329;
				}
				.inp{
					width: 480rpx;
					height: 100%;
				}
				.pla{
					font-size: 26rpx;
					font-weight: 400;
					color: #B3B3B3;
				}
			}
			.poundage_box{
				width: 100%;
				height: 60rpx;
				line-height: 50rpx;
				text-align: right;
				font-size: 22rpx;
				font-weight: 400;
				color: #757575;
			}
		}
		.withdraw_btn{
			width: 100%;
			height: 300rpx;
			position: relative;
			.btn{
				width: 690rpx;
				height: 88rpx;
				background: #F05329;
				border-radius: 10rpx;
				font-size: 38rpx;
				line-height: 88rpx;
				font-weight: 500;
				color: #FFFFFF;
				position: absolute;
				left: 30rpx;
				bottom: 0rpx;
			}
		}
		.radio-btn{
			width: 100%;
			height: 80rpx;
			position: absolute;
			left: 15rpx;
			bottom: 40rpx;
		}
		.screen_box {
			width: 750rpx;
			height: auto;
			min-height: 850rpx;
			background: #FFFFFF;
		
			.screen_box_tlt {
				width: 100%;
				height: 70rpx;
				display: flex;
				align-items: center;
		
				.tlt {
					width: 90%;
					height: 100%;
					text-align: center;
					line-height: 80rpx;
					font-size: 34rpx;
					font-weight: 500;
					color: #000000;
					padding-left: 70rpx;
		
				}
			}
			.list_box{
				width: 100%;
				height: 560rpx;
			}
			.screen_box_ul {
				width: 100%;
				height: 120rpx;
				border-bottom: 1rpx solid #E8E8E8;
				display: flex;
				align-items: center;
				.li_box{
					width: 85%;
					height: 100%;
					line-height: 120rpx;
					font-size: 30rpx;
					font-weight: 400;
					color: #515151;
				}
				.img_fir{
					width: 40rpx;
					height: 40rpx;
				}
				.img_check{
					width: 30rpx;
					height: 28rpx;
				}
			}
		
			.screenBtn_box {
				width: 100%;
				height: 88rpx;
		
				.screenBtn {
					width: 690rpx;
					height: 88rpx;
					margin: auto;
					background: #F05329;
					border-radius: 10rpx;
					font-size: 38rpx;
					font-weight: 500;
					color: #FFFFFF;
					text-align: center;
					line-height: 88rpx;
				}
			}
		}
		.pay_box{
			width: 640rpx;
			height: 586rpx;
			background: #FFFFFF;
			.pay_box_tlt{
				width: 100%;
				height: 125rpx;
				display: flex;
				align-items: center;
				.pay_box_tlt_txt{
					width: 90%;
					height: 100%;
					text-align: center;
					line-height: 125rpx;
					font-size: 30rpx;
					font-weight: 500;
					color: #000000;
				}
			}
			.pay_box_num{
				width: 100%;
				height: 140rpx;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				.name{
					font-size: 26rpx;
					font-weight: 400;
					color: #000000;
				}
				.num{
					font-weight: bold;
					color: #000000;
				}
			}
			.bor{
				width: 100%;
				height: 1rpx;
				background: #F2F2F2;
			}
			.pay_box_li{
				width: 100%;
				height: 70rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 0rpx 30rpx;
				.li_name{
					font-size: 24rpx;
					font-weight: 500;
					color: #999999;
				}
				.li_num{
					font-size: 24rpx;
					font-weight: 500;
					color: #000000;
				}
			}
		}
	}
</style>
